<template>
    <!-- 
        删除历史记录的操作
            1.通过事件绑定 @click传下标
            2.this.searchHistories.splice(index,1)
                本地数据持久化 storage.setToken('search-histories',this.searchHistories)
                线上数据持久化，请求数据接口
     -->
    <div class="search-history-container">
        <!-- 搜索历史标题 -->
        <van-cell title="历史">
            <div v-if="isShowDel">
                <span @click="$emit('removeAllHistory',[])">全部删除</span>
                &nbsp;&nbsp;
                <span  @click=" isShowDel = false ">完成</span>
            </div>
            <van-icon v-else  @click=" isShowDel = true " name="delete-o" />
        </van-cell>
        <!-- 搜索历史内容列表 -->
        <van-cell 
            :title="title" 
            v-for="(title,index) in searchHistories" 
            :key="index"
            @click="delHistory(title,index)"
        >
            <van-icon v-show="isShowDel" name="close" />
        </van-cell>
    </div>
</template>

<script>
// import storage from '@/utils/storage'
    export default {
        name:'searchHistory',
        props:{
            searchHistories:{
                type: Array,
                required: true
            }
        },
        data() {
            return {
                isShowDel: false, // 是否显示删除的图标
            }
        },
        methods: {
            /*
                关于props的数据，我们可以修改里面的内容，列如 arr.splice(index,1),这种操作。
                但是呢，假如我们需要把props的数组的数据清空，我们需要在父组件的身上自己操作，我们可以通过$emit()
             */
            delHistory(title,index){
                if(this.isShowDel){
                    // 判断是否是删除的状态
                    this.searchHistories.splice(index,1)
                    // 本地数据持久化，
                    // storage.setToken('search-histories',this.searchHistories)
                    // 线上数据持久化
                        // 1.因为没有删除单个的历史记录的接口，所以删除单个的功能无法实现
                        // 2.只有删除全部的历史记录的接口
                    return;
                }
                // 非删除的状态
                this.$emit('search',title)
            }
        },
    }
</script>

<style lang="less" scoped>

</style>